<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>自助挑选月嫂、月儿嫂</title>
		<link rel="stylesheet" type="text/css" href="../css/address.css" />
		<script src="../js/flexible.debug.js"></script>
		<script src="../js/flexible_css.debug.js"></script>

		<!--[if lt IE 9]>
        <script src="../js/html5shiv.min.js"></script>
		<script src="../js/respond.min.js"></script>
        <![endif]-->

	</head>

	<body>

		<main>

			<header>
				<ul>
					<li class="return"><img src="../img/return.png" /></li>
					<li class="list">新增服务/收货地址</li>
					<li class="null"></li>
				</ul>
			</header>

			<section>
				<form class="form">
					<ul class="form-list" id="yuyue">
						<li class="input-wrap">
							<span class="name">您的称呼</span>
							<input id="names" class="input" value="" placeholder="张女士/张先生" />
						</li>
						<!--<div id="alert_name"></div>-->
						<span class="alert_name"></span>
						<li class="input-wrap">
							<span class="name">手机号码</span>
							<input id="phone" name="mobile" class="input" value="" placeholder="请输入手机号码" />
						</li>
						<!--<div id="alert_phone"></div>-->

						<li class="input-wrap">
							<span class="name">选择城市</span>
							<select id="sel" class="select" name="province" id="s1">
						  <option>选择省</option>
						  </select>
							<select id="city" class="select" name="city">
						  <option>选择市</option>
						  </select>
							<select id="area" class="select" name="town" id="s3">
						  <option>选择区</option>
						  </select>
						</li>
						<!--隐藏的input 获取城市商品code-->
						<input id="text_this" type="text" style="display: none;" />

						<li class="input-wrap input-item">
							<span class="name">选择地址</span>
							<input id="location" class="input" maxlength="11" type="text" placeholder="选择你的所在地" />
						</li>

						<li class="input-wrap">
							<span class="name">详细地址</span>
							<input id="addressDetail" class="input" placeholder="几单元几号" />
						</li>
						<!--<div id="alert_address"></div>-->
					</ul>
				</form>
			</section>

			<footer>
				<button>保存</button>
			</footer>
			<!--地图展示-->
			<!--<div class="address">
				<div id="r-result">
					<span class="to"><img src="../img/adinw.png"/></span>
					<input type="text" id="suggestId" placeholder="请输入大厦名称或者小区名称" />
					<p id="Map_btn"><button class="Map_btn_c">确认</button></p>
				</div>

				<div id="l-map"></div>-->

				<!--<div id="searchAddr">

				</div>-->

			<!--</div>-->

			<!--地图展示完-->
		</main>
		<div class="over_hide">

		</div>

		<script src="../js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src='../js/mock.js'></script>
		<script type="text/javascript" src='../js/mockjs.js'></script>
		<script src="../js/baiduMAp.js"></script>
		<script src="../js/bmap.js"></script>

		<script>
			$(function() {
					$('footer button').click(function() {
						location.href = 'select_address.html'
					})
					$('.return').click(function() {
						location.href = 'newaddress.html'
					})
					
				})
					//获取城市商品code 因为不是每个市都开通了  所以一数组的方式对开通的市进行筛选
			var indexArea = ['昆山市', '湘潭市', '益阳市', '济南市', '咸宁市', '长沙市', '株洲市', '泉州市', '郑州市', '延安市', '汉中市', '合肥市', '亳州市', '福州市', '厦门市', '武汉市', '十堰市', '伊宁市', '玉溪市', '克拉玛依市', '广州市', '深圳市', '珠海市', '西安市', '石家庄市', '宝鸡市',
				'桂林市', '成都市', '北京市', '天津市', '绥化市', '上海市', '南京市', '咸阳市', '惠州市', '三亚市', '邢台市', '杭州市', '承德市', '廊坊市', '沈阳市', '保定市', '眉山市', '苏州市', '南市', '吉林市', '哈尔滨市', '呼和浩特市', '包头市', '呼伦贝尔市', '霸州市',
			];
			var letObj = {
				
			}
			//省市区三级联动 因为json数据量   因为json数据量太庞大  用get请求有限制 所以使用mockjs  
			//mockjs 第一个参数是拦截的地址  第二个参数是具体的内容
			$.ajax({
				type: 'get',
				url: 'www.baidu.com',
				success: function(data) {
					data = JSON.parse(data);
					//				console.log(data)
					var str = ""
					$.each(data.data, function(index, val) {
						str = "<option>" + val.cityName + "</option>"
						$('#sel').append(str)
					});
					$('body').on('change', '#sel', function(e) {
						//return $('#city').click();
						var index2 = $(this).val();
						var value = $('#sel').prop('selectedIndex');
						if (index2 == '选择省') {
							$('#city').html($('<option>').html('选择市'))
							$('#area').html($('<option>').html('选择区'))
						}
						data.data.filter(function(value, index) {
							if (index2 == value.cityName) {
								var shr = ''
								var alse = ''
								var defalute = value.childList[0].cityCode
								function obj_this(number){
									this.saone = number 
								};
								var o = new obj_this(defalute);
								var Export = $('.over_hide').text(o.saone)
							    var defalute_list = Export.text();
							    letObj.code = defalute_list
					localStorage.setItem('city_code',JSON.stringify(letObj));
								$.each(value.childList, function(index, val) {
									//console.log(val)
									shr += "<option>" + val.cityName + "</option>"
									$('#city').html(shr)
									$.each(val.childList, function(index3, val3) {
										alse += "<option>" + val3.cityName + "</option>"
										$('#area').html(alse)
									});
								});
								//嵌套城市商品code
								var $_ct_value = $('#city').val();
								$.ajax({
									url: '../js/shopcode.json',
									type: 'get',
									dataType: 'json',
									success: function(data) {
										indexArea.filter(function(o, i) {
											if ($_ct_value == o) {
												//console.log(data[i])
												$('#text_this').val(data[i].code);
											var SHOPCODE = $('#text_this').val();
											localStorage.setItem('SHOPCODE',SHOPCODE)
											} else {
												false
											}
										})
									}
								})
							}
						});
					});
					//层级关系复杂
					$('body').on('change', '#city', function() {
						var $value = $(this).val();
						//	console.log($value)
						var $index = $('#city').prop('selectedIndex');
						var Html = ''
							// 三级联动 之二级联动 市和区
						data.data.filter(function(_this, da) {
							$.each(_this.childList, function(index, val) {
								if ($value == val.cityName) {
									var code = val.cityCode;
									
									var Text_this = $('.over_hide').text(code)
									var letstring = Text_this.text()
									letObj.list = letstring
						localStorage.setItem('city_code',JSON.stringify(letObj))
									//console.log()
									$.each(val.childList, function(index22, val22) {
										Html += "<option>" + val22.cityName + "</option>"
										$('#area').html(Html)
									});
								}
							});
						})
					})
				},
				error: function(data) {
						//console.log(data)
					}
					//三级联动完
			})
			$(function($) {
				//单击input的时候显示地图
				$('#location').click(function() {
					location.href = 'location.html'
				});
				
				//本地存储
				$('#location').click(function(){
				var value_list = $('#names').val();
				var moblie_list = $('#phone').val();
				var phone_list = $('#phone_yz').val();
				var sel_list = $('#sel').val();
				var city_list = $('#city').val();
				var area_list = $('#area').val();
				var Text_this = $('#Text_this').val();
				var addressDetail = $('#addressDetail').val();
				var online_obj = {
					value_list:value_list,
					moblie_list:moblie_list,
					phone_list:phone_list,
					sel_list:sel_list,
					city_list:city_list,
					area_list:area_list,
					Text_this:Text_this,
					addressDetail:addressDetail
				};
				localStorage.setItem('obj_list',JSON.stringify(online_obj))
				})
				var getItem = localStorage.getItem('action');
				if(getItem){
					getItem = JSON.parse(getItem)
				$('#names').val(getItem.value_list);
				$('#phone').val(getItem.moblie_list);
				$('#phone_yz').val(getItem.phone_list);
				$('#addressDetail').val(getItem.addressDetail);
				$('#sel').children().html(getItem.sel_list);
				$('#city').children().html(getItem.city_list);
				$('#area').children().html(getItem.area_list);
				//console.log(getItem)
				}
			
				var SHop = localStorage.getItem('repetition');
				// console.log(SHop);
			      	var dafea_infos = localStorage.getItem('dafe_code');
			      	dafea_infos = JSON.parse(dafea_infos);
			      	// console.log(dafea_infos);
			      
				
				 
					var modehods = localStorage.getItem('this_value');
					//console.log(modehods);
					$('#location').val(modehods);
					//$('#suggestId').val("")
					var yymm_dd = localStorage.getItem('yymm_dd');
					 yymm_dd = JSON.parse(yymm_dd);
					// console.log(yymm_dd);
			})
			
		</script>
	</body>

</html>